$(function() {
  //1. 获取后台传递的关键字,填充到输入框中。
  // location.search  可以获取地址栏参数部分。search是location里面自带的属性。
  // decodeURI() 对地址栏中文进行解码
  var key = decodeURI(location.search.split("=")[1]);
  console.log(key);
  $(".search_input").val(key);
  // 2.根据关键字，去后台搜索对应的商品，并渲染。
  var obj = {
    proName: key,
    page: 1,
    pageSize: 100
  };
  function render() {
    $.ajax({
      type: "get",
      url: "/product/queryProduct",
      data: obj,
      dataType: "json",
      beforeSend: function() {
        $(".lt_product").html(' <div class="loading"></div>');
      },
      success: function(res) {
        //成功的回调函数
        console.log(res);
        setTimeout(function() {
          $(".lt_product").html(template("tmp", res));
        }, 800);
      }
    });
  }
  render();

  // 在商品列表中也有搜索框，保证在这个页面中也能进搜索。
  // 需求：点击搜索按钮，根据input值重新搜索。
  // 判断字符串是否为非空，去重，长度限制，搜索商品并显示。
  $(".search_btn").click(function() {
    var txt = $(".search_input").val();
    if (txt.trim().length == 0) {
      mui.toast("请输入搜索内容");
      return;
    }
    var arr = JSON.parse(localStorage.getItem("search"));
    var index = arr.indexOf(txt);
    if (index > -1) {
      arr.splice(index, 1);
    }
    arr.unshift(txt);
    if (arr.length > 6) {
      arr.pop();
    }
    localStorage.setItem("search", JSON.stringify(arr));
    // 调用函数重新渲染
    obj.proName = txt;
    render();
  });
});
